<style lang="scss" scoped>
  .withdrawal-form{
    padding: .2rem 0;
    background-color: #fff;
  }
  .tips{
    text-align: center;
    padding: .6rem .8rem;
    font-size: .28rem;
  }
  .form-submit{
    margin: 0 .32rem;
  }
</style>

<template>
  <div class="container hasNav">
    <van-nav-bar title="提现" left-arrow left-text="返回" @click-left="$router.back()" fixed />

    <div class="withdrawal-form">
      <van-form>
        <van-field
            readonly
            clickable
            name="account"
            label="账号"
            :value="form.account"
            placeholder="请选择银行卡"
            @click="showCardPicker = true"
        >
        </van-field>
        <van-field
            readonly
            type="number"
            name="money"
            label="金额(元)"
            :placeholder="`本次可提现金额${form.money || '0.00'}元`"
        />
        <van-field
            v-model="form.password"
            type="password"
            name="password"
            label="密码"
            placeholder="密码"
        />
      </van-form>
    </div>
    <div class="tips">申请提现后，系统会在5-7个工作日内将您提现的金额转入您的银行卡中!</div>

    <div class="form-submit">
      <van-button block type="default" color="#179AFE" @click="onCardSubmit">提交</van-button>
    </div>


    <van-popup v-model="showCardPicker" position="bottom">
      <van-picker
          show-toolbar
          :columns="columns"
          @confirm="onAccountConfirm"
          @cancel="showCardPicker = false"
      />
    </van-popup>
  </div>
</template>

<script>
  import { mapGetters } from 'vuex'

  import { withdrawalMoney } from "../../api/user";

  export default {
    name: 'Withdrawal',
    data() {
      return {
        total: 184.80,
        form: {
          account: null,
          accountName: null,
          accountNumber: null,
          money: null,
          password: null,
          orderIds: null
        },
        accountList: [],
        showCardPicker: false
      };
    },
    mounted() {
      this.form.money = this.$route.query.money
      this.form.orderIds = this.$route.query.orderIds

      this.getAccount()
    },
    computed: {
      ...mapGetters(['userInfo']),
      columns() {
        return this.accountList.map(k => k.label)
      }
    },
    methods: {
      getAccount() {
        if(!!this.userInfo.bankCardNumber) {
          this.accountList.push({
            label: `${this.userInfo.bankName}(${this.userInfo.bankCardNumber.slice(-4)})`,
            value: 2
          })
        }
        if(!!this.userInfo.alipayCardNumber) {
          this.accountList.push({
            label: `支付宝(${this.userInfo.alipayName})`,
            value: 1
          })
        }
      },
      onCardSubmit(values) {
        let params = {
          password: this.form.password,
          accountName: this.form.accountName,
          accountNumber: this.form.accountNumber,
          WithdrawalAmount: this.form.money,
          accountType: this.form.accountType,
          orderIds: this.form.orderIds
        }


        if(!params.accountType) {
          return this.$toast('请选择账号')
        }
        if(!params.WithdrawalAmount || !(parseFloat(params.WithdrawalAmount) >= 10)) {
          return this.$toast('提现金额不能小于10元')
        }
        if(!(!!params.password)) {
          return this.$toast('请输入密码')
        }

        if(params.accountType === 2) {
          params.bankName = this.form.bankName
        }

        this.$dialog.confirm({
          message: `您本次提现金额为：${this.form.money}元，是否确认?`,
        })
          .then(async () => {
            const { errorcode, errormsg } = await withdrawalMoney(params)
            if(!errorcode) {
              this.$toast('申请提现成功！')
              this.$router.push('/user/income')
            } else {
              this.$toast(errormsg)
            }
          })
          .catch(() => {
            console.log('取消')
          });
      },
      onAccountConfirm(value, index) {
        this.form.accountType = this.accountList[index].value;

        if(this.form.accountType === 1) {
          this.form.accountName = this.userInfo.alipayName;
          this.form.accountNumber = this.userInfo.alipayCardNumber;
        }
        if(this.form.accountType === 2) {
          this.form.bankName = this.userInfo.bankName;
          this.form.accountName = this.userInfo.payeeName;
          this.form.accountNumber = this.userInfo.bankCardNumber;
        }
        this.form.account = value;
        this.showCardPicker = false;
      }
    }
  };
</script>
